<template>
  <div class="demo-collapse" style="background: #fff; padding: 10px;">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item
        v-for="(item, index) of sensitivityList"
        :key="index"
        :title="title(index)"
        :name="index"
      >
        <div style="display: flex;flex-wrap:wrap;width:100%;height:300px;overflow:auto">
          <div v-for="(item1, key) of item" :key="key">
            <el-tag style="margin-right: 4px;margin-bottom:5px;">{{ item1 }}</el-tag>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import { onMounted, ref } from 'vue'

const sensitivityList = ref({})
const activeName = ref('1')
const title = (index) => {
  if (index === 0) {
    return '违禁词'
  } else if (index === 1) {
    return '色情'
  } else if (index === 2) {
    return '贪腐'
  } else if (index === 3) {
    return '暴力'
  }
}

const getSensitivityList = () => {
  request
    .get('/admin/touchy')
    .then((res) => {
      console.log('获取成功：', res)
      sensitivityList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  getSensitivityList()
})
</script>

<style></style>
